<template>
    <div class="page">
        <b-alert class="item" closable>
            <div slot="title">我是default title</div>
            <div>我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
                我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
                我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
                我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
            </div>
        </b-alert>
        <b-alert class="item" type="info" icon @close="alertClose">
            <div slot="title">我是info title</div>
            <div>我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
                我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
                我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
                我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
            </div>
        </b-alert>
        <b-alert class="item" type="success" icon closable>
            <div slot="title">我是success title</div>
            <div>我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
                我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
                我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
                我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
            </div>
        </b-alert>
        <b-alert class="item" type="warning" icon>
            <div slot="title">我是warning title</div>
            <div>我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
                我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
                我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
                我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
            </div>
        </b-alert>
        <b-alert class="item" type="error">
            <div slot="title">我是error title</div>
            <div>我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
                我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
                我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
                我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
            </div>
        </b-alert>
        <b-alert class="item" type="default" icon>
            <i slot="icon" class="iconfont icon-buoumaotubiao45 font-style"></i>
            <div slot="title">我是自定义标题 title</div>
            <div>我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
                我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
                我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
                我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,我是info内容,
            </div>
        </b-alert>
        <b-alert class="item">
            <div slot="title">仅标题</div>
        </b-alert>
        <b-alert class="item" type="success" icon>
            <div slot="title">仅标题 info</div>
        </b-alert>
        <b-alert class="item" type="success" icon>
            <div>仅内容 success</div>
        </b-alert>
        <b-alert class="item">
            <div slot="title">仅标题 warning</div>
        </b-alert>
        <b-alert class="item">
            <div>仅内容 error</div>
        </b-alert>
    </div>
</template>
<script>
export default {
    name:'AlertPage',
    methods:{
        alertClose(){
            console.log('alert --- close');
        }
    }
}
</script>
<style scoped>
.page{
    padding: 40px;
}
.page .item{
    margin-bottom: 15px;
}
.font-style{
    font-size: 32px;
}
</style>